
import 'package:flutter/material.dart';

class ToggleBox extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'asdf',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('tap button'),
          ),
          body: new ParentWidget(),
//          body: new TBox(),
        )
    );
  }
}

class TBox extends StatefulWidget{

  @override
  BoxState createState() {
    return new BoxState();
  }

}

class BoxState extends State<TBox>{

  bool _active = false;

  void _toggleState(){
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _toggleState,
      child: new Container(
        child: new Center(
          child: new Text(_active ? 'Active' : 'Inactive',
          style: new TextStyle(
            fontSize: 32.0,
            color: Colors.white
          ),),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

class ParentWidget extends StatefulWidget{

  @override
  _ParentWidgetState createState() {
    return new _ParentWidgetState();
  }
}

class _ParentWidgetState extends State<ParentWidget>{

  bool _active = false;

  void _handleTapboxChanged(bool newValue){
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(_active, _handleTapboxChanged),
    );
  }
}

class TapboxC extends StatefulWidget{

  final bool active;
  final ValueChanged<bool> onChanged;

  TapboxC(this.active, this.onChanged);

  @override
  State<StatefulWidget> createState() {
    return new _TapboxCState();
  }
}

class _TapboxCState extends State<TapboxC>{

  bool _highlight = false;

  void _handleTapDown(TapDownDetails details){
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details){
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: new Container(
        child: new Center(
          child: new Text(widget.active? 'Active' : 'Inactive',
          style: new TextStyle(
            fontSize: 32.0,
            color: Colors.white
          ),),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: widget.active
              ? Colors.lightGreen[700]
              : Colors.grey[600],
          border: _highlight
            ? new Border.all(color: Colors.teal[700], width: 10.0)
          : null
        ),
      ),
    );
  }

}